<template>
    <div>
        <cus-modal
            ref="modal"
            :title="!form.id ? '添加供应商' : '修改供应商'"
            @on-visible-change="onVisibleChange"
            width="400"
            @onOk="onOk"
        >
            <Form
                ref="formValidate"
                :model="form"
                :rules="ruleValidate"
                :label-width="110"
            >
                <FormItem
                    label="供应商:"
                    prop="name"
                    :rules="{ required: true, message: '供应商不能为空', trigger: 'blur'}"
                >
                    <Input
                        v-model="form.name"
                        clearable
                        style="width: 200px"
                        placeholder="请输入供应商"
                    ></Input>
                </FormItem>
                <FormItem
                    label="供应商编码:"
                    prop="name"
                    :rules="{ required: true, message: '供应商编码不能为空', trigger: 'blur'}"
                >
                    <Input
                        v-model="form.name"
                        clearable
                        style="width: 200px"
                        placeholder="请输入供应商编码"
                    ></Input>
                </FormItem>
                <FormItem label="供应种类:" prop="type" :rules="{ required: true, message: '供应种类不能为空', trigger: 'change'}">
                    <Select v-model="form.type" style="width:200px" placeholder="请选择供应种类" clearable>
                        <Option value="1">规格1</Option>
                        <Option value="2">规格2</Option>
                        <Option value="3">规格3</Option>
                    </Select>
                </FormItem>
                <FormItem
                    label="地址:"
                    prop="name"
                    :rules="{ required: true, message: '地址不能为空', trigger: 'blur'}"
                >
                    <Input
                        v-model="form.name"
                        clearable
                        style="width: 200px"
                        placeholder="请输入地址"
                    ></Input>
                </FormItem>
                <FormItem
                    label="联系人:"
                    prop="name"
                    :rules="{ required: true, message: '联系人不能为空', trigger: 'blur'}"
                >
                    <Input
                        v-model="form.name"
                        clearable
                        style="width: 200px"
                        placeholder="请输入联系人"
                    ></Input>
                </FormItem>
                <FormItem
                    label="电话号码:"
                    prop="phone"
                    :rules="[{ required: true, message: '电话号码不能为空', trigger: 'blur'}, { required: true, pattern: '^1[34578][0-9]{9}$',message: '电话号码错误',trigger: 'blur',},]"
                >
                    <Input
                        v-model="form.phone"
                        clearable
                        style="width: 200px"
                        placeholder="请输入电话号码"
                    ></Input>
                </FormItem>
                <FormItem label="邮箱:">
                    <Input
                        v-model="form.name"
                        clearable
                        style="width: 200px"
                        placeholder="请输入邮箱"
                    ></Input>
                </FormItem>
            </Form>
        </cus-modal>
    </div>
</template>

<script>
import {
    addUser,
    modifyUser
} from "@/api/business/system";

const form = {
    id: "",
    name: "",
    type: "1",
    price: 0,
    code: ""
};

export default {
    name: "addSupplyModal",
    data() {
        return {
            form: form,
            ruleValidate: {},
        };
    },
    mounted() {
        this.form = this.$cu.deepClone(form);
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.$refs["formValidate"].resetFields();
                this.form = this.$cu.deepClone(form)
            }
        },
        show() {
            this.$refs["modal"].show = true;
        },
        onOk() {
            this.$refs["formValidate"].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if (this.form.id) {
                        this.modifyUserApi();
                    } else this.addUserApi();
                }
            });
        },
        // 添加用户接口
        addUserApi() {
            return new Promise((resolve) => {
                addUser({
                    loginName: this.form.loginName,
                    password: "12345",
                    name: this.form.name,
                    descr: this.form.descr,
                    unitCode: this.$store.state.vuex_user.base.unitCode,
                }).then((res) => {
                    if (res.code === 1) {
                        this.form.id = res.data;
                        this.userRelevanceRoleApi().then(() => {
                            this.loading = false;
                            this.$Message.success("添加成功");
                            this.$refs["modal"].show = false;
                            this.$parent.onInit();
                        });
                        resolve();
                    } else this.loading = false;
                });
            });
        },
        // 编辑用户接口
        modifyUserApi() {
            return new Promise((resolve) => {
                modifyUser({
                    id: this.form.id,
                    loginName: this.form.loginName,
                    password: this.form.password,
                    name: this.form.name,
                    descr: this.form.descr,
                }).then((res) => {
                    if (res.code === 1) {
                        this.userRelevanceRoleApi().then(() => {
                            this.loading = false;
                            this.$Message.success("编辑成功");
                            this.$refs["modal"].show = false;
                            this.$parent.onInit();
                        });
                        resolve();
                    } else this.loading = false;
                });
            });
        },
    },
};
</script>

<style scoped lang="less">
.permission {
    height: 300px;
    width: 500px;
    border: 1px solid #dcdee2;
    overflow-y: auto;
    border-radius: 2px;
    padding: 0 0 0 10px;
}
</style>
